<html xmlns="http://www.w3.org/1999/xhtml" xmlns:c="http://java.sun.com/jstl/core"
      xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:t="http://myfaces.apache.org/tomahawk"
      xmlns:v="http://shale.apache.org/validator"
      xmlns:a4j="https://ajax4jsf.dev.java.net/ajax">

    <f:view>
        <f:loadBundle var="text" basename="#{contractForm.bundleName}"/>
        <head>
            <title>#{text['contractForm.title']}</title>
            <meta name="menu" content="ContractManagement"/>
            <meta name="heading" content="#{text['contractForm.heading']}"/>
            <script type="text/javascript" src="scripts/calendar/popcalendar.js"></script>
            <script type="text/javascript" src="scripts/calendar/date.js"></script>
            <link rel="stylesheet" type="text/css" media="all" href="styles/themeWH.css" />

        </head>

        <div class="separator"></div>
        <h:form id="contractForm" onsubmit="return validateContractForm(this)">
            <h:inputHidden value="#{contractForm.contract.id}"/>

            <h:panelGroup styleClass="info">
                <h:outputText value="#{text['contractForm.message']}"/>
            </h:panelGroup>
            <c:set var="addText" value="#{text['button.add']}"/>
            <!-- BEGIN BODY -->
            <h:panelGrid columns="1">
                <h:outputLabel for="contractCode" value="#{text['contract.contractCode']}" styleClass="desc" />
                <h:panelGrid columns="5">
                    <h:selectOneMenu id="contractType" required="true" styleClass="select" onchange="computeCode();">
                        <f:selectItem itemLabel="Dân Dụng" itemValue="DD"/>
                        <f:selectItem itemLabel="Quân Sự" itemValue="QS"/>
                    </h:selectOneMenu>
                    <h:selectOneMenu id="contractState" required="true" styleClass="select" onchange="computeCode();">
                        <f:selectItem itemLabel="Miền Bắc" itemValue="MB"/>
                        <f:selectItem itemLabel="Miền Trung" itemValue="MT"/>
                        <f:selectItem itemLabel="Miền Nam" itemValue="MN"/>
                    </h:selectOneMenu>
                    <h:inputText value="" id="code" styleClass="text" size="20" onkeyup="computeCode();">
                        <v:commonsValidator client="false" type="required" arg="#{text['contract.contractCode']}"/>
                        <a4j:support event="onchange" reRender="checkCCMessage" />
                    </h:inputText>
                    <h:inputText required="true" value="#{contractForm.contract.contractCode}" id="contractCode" size="20" style="border: none">
                        
                    </h:inputText>
                    <h:outputText id="checkCCMessage" value="#{text[contractForm.validateContractCode]}"></h:outputText>
                </h:panelGrid>

                <h:outputLabel for="content" value="#{text['contract.content']}" styleClass="desc" />
                <h:inputTextarea required="true"  id="content" value="#{contractForm.contract.content}" rows="5" cols="100" style="width: 100%">
                    <v:commonsValidator client="false" type="required" arg="#{text['contract.content']}"/>
                </h:inputTextarea>

                <h:panelGrid columns="2" style="width: 100%">

                    <t:htmlTag value="fieldset">
                        <t:htmlTag value="legend"><h:outputText value="#{text['contract.contractValue']}"/></t:htmlTag>
                        <h:panelGrid columns="3">
                            <h:selectBooleanCheckbox disabled="true"></h:selectBooleanCheckbox>
                            <h:outputText/>
                            <h:outputText/>

                            <h:outputText/>
                            <h:outputLabel for="contractValueTotal" value="#{text['contract.contractValueTotal']}"/>
                            <h:inputText value="#{contractForm.contract.contractValueTotal}" id="contractValueTotal" styleClass="text right" style="width: 50%">
                            </h:inputText>

                            <h:selectBooleanCheckbox id="contractValueA1Toggle" onclick="validateContractValues();"/>
                            <h:outputLabel for="contractValueA1" value="#{text['contract.contractValueA1']}"/>
                            <h:inputText  value="#{contractForm.contract.contractValueA1}" id="contractValueA1" styleClass="text right" size="40">
                                <v:commonsValidator client="false" type="integer" arg="#{text['contract.contractValueA1']}"/>
                            </h:inputText>

                            <h:selectBooleanCheckbox id="contractValueA2Toggle" onclick="validateContractValues();"/>
                            <h:outputLabel for="contractValueA2" value="#{text['contract.contractValueA2']}"/>
                            <h:inputText value="#{contractForm.contract.contractValueA2}" id="contractValueA2" styleClass="text right" size="40">
                                <v:commonsValidator client="false" type="integer" arg="#{text['contract.contractValueA2']}"/>
                            </h:inputText>

                            <h:selectBooleanCheckbox id="contractValueA3Toggle" onclick="validateContractValues();"/>
                            <h:outputLabel for="contractValueA3" value="#{text['contract.contractValueA3']}"/>
                            <h:inputText value="#{contractForm.contract.contractValueA3}" id="contractValueA3" styleClass="text right" size="40"/>

                            <h:selectBooleanCheckbox id="contractValueA4Toggle" onclick="validateContractValues();"/>
                            <h:outputLabel for="contractValueA4" value="#{text['contract.contractValueA4']}"/>
                            <h:inputText value="#{contractForm.contract.contractValueA4}" id="contractValueA4" styleClass="text right" size="40"/>

                            <h:selectBooleanCheckbox id="contractValueA5Toggle" onclick="validateContractValues();"/>
                            <h:outputLabel for="contractValueA5" value="#{text['contract.contractValueA5']}"/>
                            <h:inputText value="#{contractForm.contract.contractValueA5}" id="contractValueA5" styleClass="text right" size="40"/>

                        </h:panelGrid>
                    </t:htmlTag>

                    <t:htmlTag value="fieldset" style="height: 100%">
                        <t:htmlTag value="legend"><h:outputText value="#{text['contract.paidValue']}"/></t:htmlTag>
                        <h:panelGrid columns="3">
                            <h:selectBooleanCheckbox id="sameContractValues" styleClass="left" onclick="copyContractValues()"/>
                            <h:outputLabel for="sameContractValues" value="Giống GTHĐ"/>
                            <h:outputText/>

                            <h:outputText/>
                            <h:outputLabel for="paidValueTotal" value="#{text['contract.paidValueTotal']}"/>
                            <h:inputText value="#{contractForm.contract.paidValueTotal}" id="paidValueTotal" styleClass="text right"/>

                            <h:selectBooleanCheckbox id="paidValueA1Toggle" onclick="validateContractValues();"/>
                            <h:outputLabel for="paidValueA1" value="#{text['contract.paidValueA1']}"/>
                            <h:inputText  value="#{contractForm.contract.paidValueA1}" id="paidValueA1" styleClass="text right" size="40"/>

                            <h:selectBooleanCheckbox id="paidValueA2Toggle" onclick="validateContractValues();"/>
                            <h:outputLabel for="paidValueA2" value="#{text['contract.paidValueA2']}"/>
                            <h:inputText value="#{contractForm.contract.paidValueA2}" id="paidValueA2" styleClass="text right" size="40"/>

                            <h:selectBooleanCheckbox id="paidValueA3Toggle" onclick="validateContractValues();"/>
                            <h:outputLabel for="paidValueA3" value="#{text['contract.paidValueA3']}"/>
                            <h:inputText value="#{contractForm.contract.paidValueA3}" id="paidValueA3" styleClass="text right" size="40"/>

                            <h:selectBooleanCheckbox id="paidValueA4Toggle" onclick="validateContractValues();"/>
                            <h:outputLabel for="paidValueA4" value="#{text['contract.paidValueA4']}"/>
                            <h:inputText  value="#{contractForm.contract.paidValueA4}" id="paidValueA4" styleClass="text right" size="40">
                                <f:convertNumber pattern="###."/>
                            </h:inputText>

                            <h:selectBooleanCheckbox id="paidValueA5Toggle" onchange="validateContractValues();"/>
                            <h:outputLabel for="paidValueA5" value="#{text['contract.paidValueA5']}"/>
                            <h:inputText value="#{contractForm.contract.paidValueA5}" id="paidValueA5" styleClass="text right" size="40"/>

                        </h:panelGrid>
                    </t:htmlTag>
                </h:panelGrid>
                <h:panelGrid columns="2">

                    <h:outputLabel styleClass="desc" for="signedDate" value="#{text['contract.signedDate']}"/>
                    <h:outputLabel styleClass="desc" for="dayToFinish" value="#{text['contract.dayToFinish']}"/>
                    <t:inputCalendar popupTheme="WH" required="true" renderPopupButtonAsImage="true" renderAsPopup="true" type="date" value="#{contractForm.contract.signedDate}" id="signedDate">
                        <v:commonsValidator client="false" type="required" arg="#{text['contract.signedDate']}"/>
                    </t:inputCalendar>
                    <h:panelGroup>
                        <h:inputText value="#{contractForm.contract.dayToFinish}" id="dayToFinish" required="true" styleClass="text">
                            <v:commonsValidator client="false" type="required" arg="#{text['contract.dayToFinish']}"/>
                        </h:inputText>
                        <h:outputText> (ngày)</h:outputText>
                    </h:panelGroup>
                    <h:outputLabel styleClass="desc" for="moneyRecieved" value="#{text['contract.moneyRecieved']}"/>
                    <h:outputLabel styleClass="desc" for="moneyRemaining" value="#{text['contract.moneyRemaining']}"/>
                    <h:inputText value="#{contractForm.contract.moneyRecieved}" id="moneyRecieved" styleClass="text small"/>
                    <h:inputText value="#{contractForm.contract.moneyRemaining}" id="moneyRemaining" styleClass="text small"/>
                    <h:outputLabel styleClass="desc" for="checkTakeOver" value="#{text['contract.checkTakeOver']}"/>
                    <h:outputText/>
                    <h:selectOneMenu id="checkTakeOver" value="#{contractForm.contract.checkTakeOver}" styleClass="select">
                        <f:selectItem itemLabel="Đã Nghiệm Thu" itemValue="1"/>
                        <f:selectItem itemLabel="Chưa Nghiệm Thu" itemValue="0"/>
                    </h:selectOneMenu>
                </h:panelGrid>
                <h:panelGrid columns="2" style="width: 100%">

                    <t:htmlTag value="fieldset">
                        <t:htmlTag value="legend"><h:outputText value="#{text['contract.A']}"/></t:htmlTag>
                        <h:panelGrid columns="2" width="100%">
                            <h:outputLabel  for="customerName" value="#{text['contract.customerName']}"/>
                            <h:selectOneMenu value="#{contractForm.contract.customerName}" id="customerName" styleClass="text right">
                                <f:selectItems value="#{contractForm.customerList}"></f:selectItems>
                                <a4j:support event="onchange" action="#{contractForm.selectCustomer}" reRender="customerPresentor,customerTitle,customerAddress,customerPhone,customerFax,customerAccount,customerTaxCode"/>
                            </h:selectOneMenu>

                            <h:outputLabel  for="customerPresentor" value="#{text['contract.customerPresentor']}"/>
                            <h:inputText  value="#{contractForm.contract.customerPresentor}" id="customerPresentor" styleClass="text right" size="40"/>

                            <h:outputLabel  for="customerTitle" value="#{text['contract.customerTitle']}"/>
                            <h:inputText  value="#{contractForm.contract.customerTitle}" id="customerTitle" styleClass="text right" size="40"/>

                            <h:outputLabel for="customerAddress" value="#{text['contract.customerAddress']}"/>
                            <h:inputText  value="#{contractForm.contract.customerAddress}" id="customerAddress" styleClass="text right" size="40"/>

                            <h:outputLabel  for="customerPhone" value="#{text['contract.customerPhone']}"/>
                            <h:inputText   value="#{contractForm.contract.customerPhone}" id="customerPhone" styleClass="text right" size="40"/>

                            <h:outputLabel for="customerFax" value="#{text['contract.customerFax']}"/>
                            <h:inputText  value="#{contractForm.contract.customerFax}" id="customerFax" styleClass="text right" size="40"/>

                            <h:outputLabel for="customerAccount" value="#{text['contract.customerAccount']}"/>
                            <h:inputText value="#{contractForm.contract.customerAccount}" id="customerAccount" styleClass="text right" size="40"/>

                            <h:outputLabel for="customerTaxCode" value="#{text['contract.customerTaxCode']}"/>
                            <h:inputText value="#{contractForm.contract.customerTaxCode}" id="customerTaxCode" styleClass="text right" size="40"/>
                        </h:panelGrid>
                    </t:htmlTag>

                    <t:htmlTag value="fieldset">
                        <t:htmlTag value="legend"><h:outputText value="#{text['contract.B']}"/></t:htmlTag>
                        <h:panelGrid columns="2" width="100%">
                            <h:outputLabel for="bName" value="#{text['contract.B.name']}"/>
                            <h:inputText value="#{contractForm.contract.comName}" id="bName" styleClass="text right"/>

                            <h:outputLabel for="bPresentor" value="#{text['contract.B.presentor']}"/>
                            <h:inputText value="#{contractForm.contract.comPresentor}" id="bPresentor" styleClass="text right" size="40"/>

                            <h:outputLabel for="bTitle" value="#{text['contract.B.title']}"/>
                            <h:inputText value="#{contractForm.contract.comTitle}" id="bTitle" styleClass="text right" size="40"/>

                            <h:outputLabel for="bAddress" value="#{text['contract.B.address']}"/>
                            <h:inputText value="#{contractForm.contract.comAddress}" id="bAddress" styleClass="text right" size="40"/>

                            <h:outputLabel for="bPhone" value="#{text['contract.B.phone']}"/>
                            <h:inputText value="#{contractForm.contract.comPhone}" id="bPhone" styleClass="text right" size="40"/>

                            <h:outputLabel for="bFax" value="#{text['contract.B.fax']}"/>
                            <h:inputText value="#{contractForm.contract.comFax}" id="bFax" styleClass="text right" size="40"/>

                            <h:outputLabel for="bAccount" value="#{text['contract.B.account']}"/>
                            <h:inputText value="#{contractForm.contract.comAccount}" id="bAccount" styleClass="text right" size="40"/>

                            <h:outputLabel for="bTaxCode" value="#{text['contract.B.taxCode']}"/>
                            <h:inputText value="#{contractForm.contract.comTaxCode}" id="bTaxCode" styleClass="text right" size="40"/>
                        </h:panelGrid>
                    </t:htmlTag>
                </h:panelGrid>
                <h:panelGrid width="100%">
                    <t:htmlTag value="fieldset">
                        <t:htmlTag value="legend"><h:outputText value="#{text['contract.relateDocuments']}"/></t:htmlTag>

                    </t:htmlTag>
                </h:panelGrid>
                <h:panelGroup styleClass="buttonBar bottom">
                    <h:commandButton value="#{text['button.save']}" action="#{contractForm.save}" styleClass="button"/>
                    <c:if test="${not empty contractForm.contract.id}">
                        <h:commandButton value="#{text['button.delete']}" action="#{contractForm.delete}"
                                         styleClass="button" onclick="bCancel=true; return confirmDelete('Hợp Đồng')"/>
                    </c:if>
                    <h:commandButton value="#{text['button.cancel']}" action="#{contractForm.cancel}" immediate="true"
                                     styleClass="button" onclick="bCancel=true"/>
                </h:panelGroup>
            </h:panelGrid>

        </h:form>

        <v:validatorScript functionName="validateContractForm"/>
        <script type="text/javascript">
            Form.focusFirstElement($('contractForm'));
            highlightFormElements();
            //computeCode();
            initCompanyInfo();
            initContractValues();
            function computeCode(){
                var cType = document.getElementById("contractForm:contractType").value;
                var cState = document.getElementById("contractForm:contractState").value;
                var cCode = document.getElementById("contractForm:code").value;
                document.getElementById("contractForm:contractCode").value = cType+'-'+cState+'-'+cCode;
            }
            function initCompanyInfo(){
                document.getElementById("contractForm:bName").value = "#{text['contract.B.name.value']}";
                document.getElementById("contractForm:bPresentor").value = "#{text['contract.B.presentor.value']}";
                document.getElementById("contractForm:bTitle").value = "#{text['contract.B.title.value']}";
                document.getElementById("contractForm:bAddress").value = "#{text['contract.B.address.value']}";
                document.getElementById("contractForm:bPhone").value = "#{text['contract.B.phone.value']}";
                document.getElementById("contractForm:bFax").value = "#{text['contract.B.fax.value']}";
                document.getElementById("contractForm:bAccount").value = "#{text['contract.B.account.value']}";
                document.getElementById("contractForm:bTaxCode").value = "#{text['contract.B.taxCode.value']}";
            }
            function validateContractValues(){
                var isValueA1Checked = document.getElementById("contractForm:contractValueA1Toggle").checked;
                var isValueA2Checked = document.getElementById("contractForm:contractValueA2Toggle").checked;
                var isValueA3Checked = document.getElementById("contractForm:contractValueA3Toggle").checked;
                var isValueA4Checked = document.getElementById("contractForm:contractValueA4Toggle").checked;
                var isValueA5Checked = document.getElementById("contractForm:contractValueA5Toggle").checked;

                var isPaidValueA1Checked = document.getElementById("contractForm:paidValueA1Toggle").checked;
                var isPaidValueA2Checked = document.getElementById("contractForm:paidValueA2Toggle").checked;
                var isPaidValueA3Checked = document.getElementById("contractForm:paidValueA3Toggle").checked;
                var isPaidValueA4Checked = document.getElementById("contractForm:paidValueA4Toggle").checked;
                var isPaidValueA5Checked = document.getElementById("contractForm:paidValueA5Toggle").checked;

               document.getElementById("contractForm:contractValueA1").readOnly = !isValueA1Checked;
               document.getElementById("contractForm:contractValueA2").readOnly = !isValueA2Checked;
               document.getElementById("contractForm:contractValueA3").readOnly = !isValueA3Checked;
               document.getElementById("contractForm:contractValueA4").readOnly = !isValueA4Checked;
               document.getElementById("contractForm:contractValueA5").readOnly = !isValueA5Checked;

               setToZero(document.getElementById("contractForm:contractValueA1"), !isValueA1Checked);
               setToZero(document.getElementById("contractForm:contractValueA2"), !isValueA2Checked);
               setToZero(document.getElementById("contractForm:contractValueA3"), !isValueA3Checked);
               setToZero(document.getElementById("contractForm:contractValueA4"), !isValueA4Checked);
               setToZero(document.getElementById("contractForm:contractValueA5"), !isValueA5Checked);

               document.getElementById("contractForm:paidValueA1").readOnly = !isPaidValueA1Checked;
               document.getElementById("contractForm:paidValueA2").readOnly = !isPaidValueA2Checked;
               document.getElementById("contractForm:paidValueA3").readOnly = !isPaidValueA3Checked;
               document.getElementById("contractForm:paidValueA4").readOnly = !isPaidValueA4Checked;
               document.getElementById("contractForm:paidValueA5").readOnly = !isPaidValueA5Checked;

               setToZero(document.getElementById("contractForm:paidValueA1"), !isPaidValueA1Checked);
               setToZero(document.getElementById("contractForm:paidValueA2"), !isPaidValueA2Checked);
               setToZero(document.getElementById("contractForm:paidValueA3"), !isPaidValueA3Checked);
               setToZero(document.getElementById("contractForm:paidValueA4"), !isPaidValueA4Checked);
               setToZero(document.getElementById("contractForm:paidValueA5"), !isPaidValueA5Checked);

            }

            function setToZero(element, isNeedToSet){
                if(isNeedToSet){
                    element.value = 0;
                }
            }

            function initContractValues(){
                var isValueA1Checked = (document.getElementById("contractForm:contractValueA1").value) > 0 ? true: false;
                var isValueA2Checked = (document.getElementById("contractForm:contractValueA2").value) > 0 ? true: false;
                var isValueA3Checked = (document.getElementById("contractForm:contractValueA3").value) > 0 ? true: false;
                var isValueA4Checked = (document.getElementById("contractForm:contractValueA4").value) > 0 ? true: false;
                var isValueA5Checked = (document.getElementById("contractForm:contractValueA5").value) > 0 ? true: false;

                var isPaidValueA1Checked = (document.getElementById("contractForm:paidValueA1").value) > 0 ? true: false;
                var isPaidValueA2Checked = (document.getElementById("contractForm:paidValueA2").value) > 0 ? true: false;
                var isPaidValueA3Checked = (document.getElementById("contractForm:paidValueA3").value) > 0 ? true: false;
                var isPaidValueA4Checked = (document.getElementById("contractForm:paidValueA4").value) > 0 ? true: false;
                var isPaidValueA5Checked = (document.getElementById("contractForm:paidValueA5").value) > 0 ? true: false;


                document.getElementById("contractForm:contractValueA1Toggle").checked = isValueA1Checked;
                document.getElementById("contractForm:contractValueA2Toggle").checked = isValueA2Checked;
                document.getElementById("contractForm:contractValueA3Toggle").checked = isValueA3Checked;
                document.getElementById("contractForm:contractValueA4Toggle").checked = isValueA4Checked;
                document.getElementById("contractForm:contractValueA5Toggle").checked = isValueA5Checked;


                document.getElementById("contractForm:paidValueA1Toggle").checked = isPaidValueA1Checked;
                document.getElementById("contractForm:paidValueA2Toggle").checked = isPaidValueA2Checked;
                document.getElementById("contractForm:paidValueA3Toggle").checked = isPaidValueA3Checked;
                document.getElementById("contractForm:paidValueA4Toggle").checked = isPaidValueA4Checked;
                document.getElementById("contractForm:paidValueA5Toggle").checked = isPaidValueA5Checked;
                validateContractValues();
            }
            
            function copyContractValues(){
                var isSameContractValues = document.getElementById("contractForm:sameContractValues").checked;
                if(isSameContractValues){
                    var valueA1 = document.getElementById("contractForm:contractValueA1").value;
                    var valueA2 = document.getElementById("contractForm:contractValueA2").value;
                    var valueA3 = document.getElementById("contractForm:contractValueA3").value;
                    var valueA4 = document.getElementById("contractForm:contractValueA4").value;
                    var valueA5 = document.getElementById("contractForm:contractValueA5").value;


                    document.getElementById("contractForm:paidValueA1").value = valueA1;
                    document.getElementById("contractForm:paidValueA2").value = valueA2;
                    document.getElementById("contractForm:paidValueA3").value = valueA3;
                    document.getElementById("contractForm:paidValueA4").value = valueA4;
                    document.getElementById("contractForm:paidValueA5").value = valueA5;
                    
                }
            }
        </script>
    </f:view>
</html>
